<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JSONX TEST</title>
    <script type="text/javascript" src="../../dist/index.web.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      function IntroHook(){
        const [count, setCount] = useState(0);
        useEffect(()=>{
          console.log('only run once')
        },[])
        const exposeprops = {count,setCount};
        return {
          component:'div',
          passprops:true,
          children:[
            {
              component:'p',
              children: 'This is from IntroHookComponent '
            },
            {
                component:'p',
                passprops:true,
                children:[
                  {
                    component:'span',
                    children:'You clicked ',
                  },
                  {
                    component:'input',
                    props:{
                      name:'inputCount',
                      defaultValue:0
                    },
                    thisprops:{
                      value:['count'],
                    },
                  },
                  {
                    component:'span',
                    children:' times'
                  }
                ]
            },
            {
              component:'button',
              props:{
                id:'buttonCount'
              },
              __dangerouslyBindEvalProps:{
                onClick(count,setCount){
                  setCount(count+1);
                },
              },
              children:'Click me'
            }
          ],
        }
      }
      const IntroHookComponent = jsonx._jsonxComponents.makeFunctionComponent(IntroHook)
      const boundConfig = {
        reactComponents:{
          IntroHookComponent,
        },
      };
      jsonx.jsonxRender.call(boundConfig,{ 
        jsonx: {
          component:'IntroHookComponent',
        }, 
        querySelector:'#root', });
    </script>
  </body>
</html>